<template>
  <div class="login">
    <div class="login_box">
      <h2 class="login_title">西州医院一体化智慧中心</h2>
      <div class="login_inp">
        <el-input
          v-model="loginS.account"
          placeholder="请输入您的用户名/邮箱"
          clearable
        />
        <el-input
          v-model="loginS.password"
          placeholder="请输入您的密码"
          type="password"
          show-password
        />
        <el-button id="btn" type="primary" @click="addLogin"
          >立即登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { usersLoginReq } from "@/api/user.api";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
//登录账号 密码的值
const loginS = reactive({
  account: "",
  password: "",
});
const router = useRouter()
//点击登录
const addLogin = async () => {
  //判断输入框是否为空
  if (loginS.account == "" || loginS.password == "") {
    ElMessage.error("请输入账号或者密码！");
    return;
  }
  //发送请求
  const res = await usersLoginReq(loginS);
  //判断是否登录成功
  if (res.data.code == 1) {
    ElMessage({
      message: "登录成功",
      type: "success",
    });
    // 登录成功跳转至首页
    router.push('/home')
  } else {
    ElMessage.error(res.data.msg);
    loginS.account = "";
    loginS.password = "";
  }
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: url("@/assets/imgs/01.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login_box {
    width: 500px;
    height: 300px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    position: absolute;
    bottom: 200px;
    left: calc(50% - 250px);
    .login_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-bottom: 30px;
    }
    .login_inp {
      width: 320px;
      margin: 0 auto;
      #btn {
        width: 100%;
        height: 40px;
        margin: 0;
        padding: 0;
        border-radius: 5px;
      }
    }
  }
  .el-input {
    width: 100%;
    height: 40px;
    margin-bottom: 30px;
  }
  .el-input__wrapper {
    // background: none;
  }
}
</style>
